<!DOCTYPE html>
<!-- supperss ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./yb_system_css/amazeui.min.css">
    <link rel="stylesheet" href="./yb_system_css/amazeui.cropper.css">
    <link rel="stylesheet" href="./yb_system_css/custom_up_img.css">
    <link rel="stylesheet" href="./yb_system_css/reset.css">
    <link rel="stylesheet" href="./yb_system_css/commone.css">
    <link rel="stylesheet" media="screen and (min-width:481px)" href="./yb_system_css/usercenter.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="./yb_system_css/usercenter(1).css">
    <script src="./yb_system_js/hm.js"></script>
    <script type="text/javascript">
        var basePath = "/";
    </script>
    <script src="./yb_system_js/common.js"></script>
    <script src="./yb_system_js/jquery-3.5.1.min.js"></script>
    <script src="./yb_system_js/footfixed.js"></script>
    <script src="./yb_system_js/layer.js"></script>
    <link rel="stylesheet" href="./yb_system_css/layer.css" id="layuicss-layer">
    <title>个人中心</title>
    <script src="./yb_system_js/amazeui.min.js"></script>
    <script src="./yb_system_js/cropper.min.js"></script>
    <script src="./yb_system_js/custom_up_img.js"></script>
</head>
<body>
<div class="content">
    <div th:replace="public :: header"></div>
    <div class="content-main">
        <div class="main-info">

            <div class="main-user-left">
                <div class="user-left-card info-card">
                    <div class="user-img"><img th:src="@{${userMember.photoPath != null ? userMember.photoPath : './yb_system_picture/user_Default.png'}}"></div>
                    <div class="usertop-for-phone">
                        <div class="user-name" th:text="${userMember.nickname}"></div>
                        <div class="user-style" th:text="${userMember.motto}">不要做懒人，给自己一个介绍吧</div>
                    </div>
                </div>
                <div class="user-left-card">
                    <div class="card-flex">
                        <div class="user-inter"><a href="javascript:"><span
                                class="user-inter-num" th:text="${userMember.questionNum}">0</span><span>提问</span></a></div>
                        <div class="line"></div>
                        <div class="user-inter"><a href="javascript:"><span
                                class="user-inter-num" th:text="${userMember.answerNum}">0</span><span>回答</span></a></div>
                        <div class="line"></div>
                        <div class="user-inter"><a href="javascript:"><span
                                class="user-inter-num" th:text="${userMember.articleNum}">0</span><span>文章</span></a></div>
                    </div>
                </div>
                <div class="user-left-card">
                    <div class="user-editor">
                        <a th:href="@{/personalHomepage}">
                            <img class="tip-img" src="./yb_system_picture/usercenter.png" alt="有贝口腔网">
                            <span>个人中心</span>
                            <img class="bottom-right" src="./yb_system_picture/arrow-bttom.png" alt="有贝口腔网">
                        </a>
                    </div>
                    <div class="user-editor user-editor-active">
                        <a th:href="@{/personalDetail}">
                            <img src="./yb_system_picture/Write.png" alt="有贝口腔网">
                            <span>个人信息</span>
                            <img class="bottom-right" src="./yb_system_picture/arrow-bttom.png" alt="有贝口腔网">
                        </a>
                    </div>
                    <div class="user-editor">
                        <a th:href="@{/messages}">
                            <img src="./yb_system_picture/notice-lan.png" alt="有贝口腔网">
                            <span>站内消息</span>
                            <img class="bottom-right" src="./yb_system_picture/arrow-bttom.png" alt="有贝口腔网">
                        </a>
                    </div>
                </div>
            </div>
            <div class="main-user-right">
                <div class="user-info-editor">
                    <div class="editor-top">
                        <h2>个人信息</h2>
                        <a th:href="@{/personalHomepage}" class="go-center"><span>返回个人中心主页</span><img
                                src="./yb_system_picture/arrow-bttom.png" alt="有贝口腔网"></a>
                    </div>
                    <div class="change-info">
                        <div class="change-info-top">
                            <div class="change-info-defa">
                                <div class="defa-img">
                                    <a href="javascript:;">
                                        <img th:src="@{${userMember.photoPath != null ? userMember.photoPath : './yb_system_picture/user_Default.png'}}">
                                    </a>
                                </div>
                                <div class="defa-text">
                                    <h3 class="h3-name" th:text="${userMember.nickname}"></h3>
                                    <p class="p-style" th:text="${userMember.motto}">不要做懒人，给自己一个介绍吧</p>
                                </div>
                            </div>
                            <div class="change-info-btn">修改信息</div>
                        </div>
                        <div class="change-info-show" style="display: none;">
                            <div class="change-show-img">
                                <div class="up-img-cover" id="up-img-touch">
                                    <img class="am-circle" id="user-photo"
                                         th:src="@{${userMember.photoPath != null ? userMember.photoPath : './yb_system_picture/user_Default.png'}}">
                                    <span class="change-img-btn">更换头像</span>
                                </div>
                                <!--图片上传框弹框-->
                                <div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
                                    <div class="am-modal-dialog up-frame-parent up-frame-radius">
                                        <div class="am-modal-hd up-frame-header">
                                            <label>上传头像</label>
                                            <a href="javascript: void(0)" class="am-close am-close-spin"
                                               data-am-modal-close="">×</a>
                                        </div>
                                        <div class="am-modal-bd  up-frame-body">
                                            <div class="am-g am-fl">
                                                <div class="am-form-group am-form-file">
                                                    <div class="am-fl">
                                                        <button type="button"
                                                                class="am-btn am-btn-default am-btn-sm choose-img">
                                                            选择要上传的图片
                                                        </button>
                                                    </div>
                                                    <input type="file" id="inputImage">
                                                </div>
                                            </div>
                                            <div class="am-g am-fl">
                                                <div class="up-pre-before up-frame-radius">
                                                    <img alt="" th:src="@{/personalDetail}"
                                                         id="image">
                                                </div>
                                                <div class="up-pre-after up-frame-radius">
                                                </div>
                                            </div>
                                            <div class="am-g am-fl">
                                                <div class="up-control-btns">
                                                    <span onclick="rotateimgleft()">左转</span>
                                                    <span onclick="rotateimgright()">右转</span>
                                                    <span id="up-btn-ok">提交</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="writer-area">
                                <div class="write-box">
                                    <p class="write-box-p">
                                        <input class="write-box-input" placeholder="输入你的昵称" maxlength="20" type="text"
                                               th:value="${userMember.nickname}">
                                        <span class="write-box-span"><i>0</i>/20</span>
                                    </p>
                                    <p class="weite-box-tip">2-20个汉字，请勿使用包含特殊符号或含有明显营销推广意图的媒体名</p>
                                </div>
                                <div class="write-box">
                                    <p class="write-box-p">
                                        <textarea class="write-box-textarea" th:text="${userMember.motto}" placeholder="不要做懒人，给自己一个介绍吧"
                                                  maxlength="250" type="text"></textarea>
                                        <span class="write-box-right"><i>0</i>/250</span>
                                    </p>
                                    <p class="weite-box-tip">良好的简介内容更容易收获用户的关注。填写建议个人介绍，内容介绍</p>
                                </div>
                                <div class="sub-btn">
                                    <div class="anniu sure-btn">保存</div>
                                    <div class="anniu close-btn">取消</div>
                                </div>
                            </div>
                        </div>
                        <div class="login-other">
                            <div class="login-other-title">登录方式</div>
                            <div class="login-other-type">
                                <div class="login-other-list">
                                    <div>
                                        <span class="change-obj">绑定手机</span>
                                        <span class="change-obj-show" th:text="${userMember.phone}"></span>
                                    </div>
                                    <div class="change-obj-btn" onclick="setPhone(this)">设置修改手机号</div>
                                </div>
                                <div class="login-other-list">
                                    <div>
                                        <span class="change-obj">修改邮箱</span>
                                        <span class="change-obj-show" th:text="${userMember.email}"></span>
                                    </div>
                                    <div class="change-obj-btn" onclick="setEmail(this)">设置修改邮箱</div>
                                </div>
                            </div>
                        </div>
                        <div class="login-other">
                            <div class="login-other-title">安全设置</div>
                            <div class="login-other-type">
                                <div class="login-other-list">
                                    <div>
                                        <span class="change-obj">密码设置</span>
                                        <span class="change-obj-show"></span>
                                    </div>
                                    <div class="change-obj-btn" onclick="setPwd(this)">设置登录密码</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="public::footer"></div>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?4245936cbef31e434e2b387b56dfd7d8";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</div>
<script>
    /* $("li").click(function(){
        $("li").removeClass("select-active");
        $(this).addClass("select-active");
    }) */
    $(".change-info-show").hide();
    $(".change-info-btn").click(function () {
        $(".change-info-top").hide();
        $(".change-info-show").show();
    })
    $(".write-box-input").change(function () {
        var inputle = $(this).val().length;
        $(".write-box-span i").text(inputle);
    })
    $(".write-box-textarea").change(function () {
        var textareale = $(this).val().length;
        $(".write-box-right i").text(textareale);
    })
    $(".write-box-input").focus(function () {
        $(this).parent().css("border-color", "rgba(41,167,230,1)");
    })
    $(".write-box-input").blur(function () {
        $(this).parent().css("border-color", "#ddd");
    })
    $(".write-box-textarea").focus(function () {
        $(this).parent().css("border-color", "rgba(41,167,230,1)");
    })
    $(".write-box-textarea").blur(function () {
        $(this).parent().css("border-color", "#ddd");
    })
    $(".sure-btn").click(function () {
        var inputval = $(".write-box-input").val();
        var textareaval = $(".write-box-textarea").val();
        if (inputval == "") {
            layer.msg("请输入昵称");
            return false;
        }
        $(".h3-name").text(inputval);
        $(".p-style").text(textareaval);
        //更新用户信息
        updateUserInfo(inputval, textareaval);
    })
    $(".close-btn").click(function () {
        $(".change-info-show").hide();
        $(".change-info-top").show();
    })

    // 修改手机号/邮箱
    function setPhone(obj) {
        alert("修改手机号码！");
        layer.open({
            type: 2,
            title: "设置手机号码",
            shadeClose: false,
            area: ['600px', '250px'],
            fixed: false,
            maxmin: false,
            content: basePath + 'personalSetPhone'
        });
    }

    function setEmail(obj) {
        layer.open({
            type: 2,
            title: "设置电子邮箱",
            shadeClose: false,
            area: ['600px', '250px'],
            fixed: false,
            maxmin: false,
            content: basePath + 'personalSetEmail'
        });
    }
    function setPwd(obj) {
        layer.open({
            type: 2,
            title: "设置登录密码",
            shadeClose: false,
            area: ['600px', '300px'],
            fixed: false,
            maxmin: false,
            content: basePath + 'personalSetPwd'
        });
    }
    //更新用户信息
    var logo = "";
    function updateUserInfo(nick, desc) {
        $.post(basePath + "updatePersonalDetail?nick=" + nick + "&userDesc=" + desc + "&logo=" + logo, function (data) {
            if (data.success) {
                layer.msg("保存成功");
                $(".change-info-show").hide();
                $(".change-info-top").show();
                location.reload();
            } else {
                layer.msg(data.msg);
            }
        });
    }
    $(function () {//绑定上传头像事件,上传头像
        $('#up-btn-ok').on('click', function () {
            // var $modal = $('#my-modal-loading');
            // var $modal_alert = $('#my-alert');
            var $modal = $('#doc-modal-1');
            var img_src = $image.attr("src");
            if (img_src == "") {
                // set_alert_info("没有选择上传的图片");
                // $modal_alert.modal();
                layer.msg("没有选择上传的图片")
                return false;
            }
            // $modal.modal();
            // var index = layer.load(1, {
            //     shade: [0.5,'#fff'] //0.1透明度的白色背景
            // });
            var url = basePath + 'uploadPersonHeaderBaseCode?t=' + new Date().getTime();
            var canvas = $("#image").cropper('getCroppedCanvas');
            var data = canvas.toDataURL(); //转成base64
            var params = {};
            params["upfile"] = data.toString();
            $.ajax({
                url: url,
                dataType: 'json',
                type: "POST",
                data: params,
                success: function (data, textStatus) {
                    // $modal.modal('close');
                    // set_alert_info(data.result);
                    // $modal_alert.modal();
                    if (data.success) {
                        logo = data.data.data;
                        $("#up-img-touch img").attr("src", logo);
                        layer.msg("上传头像成功");
                        // var img_name=data.file.split('/')[2];
                        // console.log(img_name);
                        // $("#pic").text(img_name);
                        $modal.modal('close');//关闭弹窗
                        window.location.reload();
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function () {
                    layer.msg("图片上传失败了！")
                    // $modal.modal('close');
                    // set_alert_info("上传图片失败了！");
                    // $modal_alert.modal();
                    //console.log('Upload error');
                }
            });
        });
    });
</script>
</body>
</html>